<script setup>

import {definedPerson} from "../store/stores.js";

let person = definedPerson()
//读取存储的数据
</script>

<template>
  <div>
    <h1>operate视图,用户修改Pinia中的数据</h1>
    名字：<input type="text" v-model="person.username"><br>
    年龄：<input type="text" v-model="person.age"><br>
    爱好： 吃饭<input type="checkbox" value="吃饭" v-model="person.hobbies">
    LOL<input type="checkbox" value="LOL" v-model="person.hobbies">
    唱歌<input type="checkbox" value="唱歌" v-model="person.hobbies">
    跳舞<input type="checkbox" value="跳舞" v-model="person.hobbies">
    打排球<input type="checkbox" value="打排球" v-model="person.hobbies">
    跑步<input type="checkbox" value="跑步" v-model="person.hobbies"><br>
    <button @click="person.doubleAge()">年龄加倍</button>
    <br>
    <button @click="person.$reset()">恢复默认值</button>
    <br>
    <!--一次性更改多个值-->
    <button @click="person.$patch({username:'奥特曼',age:20,hobbies:['晒太阳','打怪兽']})">更改多个值</button>
    <hr>

    <br>
    展示person的数据{{ person }}
  </div>
</template>

<style scoped>

</style>